<template>
  <div class="new">
    <div class="headerr">
      <span class="shouye" @click="$router.push('/proportal/index')"
        >首页 /</span
      >
      <span>转正申请</span>
    </div>
    <div class="xuan">
      <div class="top">
        <span>转正申请</span>
      </div>
      <div class="bottom">转正申请应用</div>
    </div>
    <div class="table">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        label-position="top"
        class="demo-ruleForm"
      >
        <el-form-item label="申请人" prop="applicant">
          <person-search v-model="ruleForm.applicant" size="small" disabled />
        </el-form-item>
        <el-form-item label="日期" prop="date">
          <el-date-picker
            v-model="ruleForm.date"
            type="date"
            size="small"
            placeholder="选择日期"
            disabled
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="所在部门" prop="applicant_dept">
          <el-input
            v-model="ruleForm.applicant_dept"
            size="small"
            suffix-icon="el-icon-search"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="入职时间" prop="entry_time">
          <el-date-picker
            v-model="ruleForm.entry_time"
            type="date"
            size="small"
            placeholder="选择日期"
            :disabled="!ifDraft"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="计划转正时间" prop="formal_time">
          <el-date-picker
            v-model="ruleForm.formal_time"
            type="date"
            size="small"
            placeholder="选择日期"
            :disabled="!ifDraft"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="转正材料述职" style="width: 100%">
          <el-upload
            drag
            action
            :http-request="uploadFile"
            multiple
            class="appendix-content"
            name="upload"
            :on-remove="onRemove"
            :on-preview="onPreview"
            :file-list="showFileList"
            :before-upload="onBeforeUpload"
            :limit="10"
            v-if="ifDraft"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              仅支持ppt/pptx格式文件，
              最大支持上传10个文件，单个文件大小不超过100MB
            </div>
          </el-upload>
          <div class="annex" v-else-if="showFileList.length">
            <el-row :gutter="24">
              <el-col
                v-for="(item, ind) in showFileList"
                :key="`annex${ind}`"
                :span="6"
              >
                <file-view :fileUrl="ruleForm.report" />
              </el-col>
            </el-row>
          </div>
          <span v-else>--</span>
        </el-form-item>
        <el-form-item
          label="你对公司的认识，对公司文化的认识？"
          prop="culture"
          style="width: 100%"
        >
          <el-input
            type="textarea"
            v-model="ruleForm.culture"
            size="small"
            placeholder="请输入你的认识"
            resize="none"
            rows="4"
            :disabled="!ifDraft"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="通过这阶段的试用期，你的最大收获是什么？"
          prop="harvest"
          style="width: 100%"
        >
          <el-input
            type="textarea"
            v-model="ruleForm.harvest"
            size="small"
            placeholder="请输入你的最大收获"
            resize="none"
            rows="4"
            :disabled="!ifDraft"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <show-approval v-if="mode !== 'submit'" :nodesInfo="nodesInfo" />
    <div class="footer">
      <el-button
        v-for="item in buttons"
        :type="item.primary ? 'primary' : ''"
        :key="item.value"
        size="small"
        @click="operate(item.value)"
        >{{ item.label }}</el-button
      >
    </div>
  </div>
</template>
<script>
import PersonSearch from "@/components/public/personSearch.vue";
import {
  getFormData,
  getSteps,
  setApprovalResult,
  submitForm,
  uploadSomething,
} from "@/http/api";
import tools from "@/utils/tools";
import FileView from "@/components/proportal/FileView.vue";
import ShowApproval from "@/components/proportal/ShowApproval";
export default {
  name: "formalapply",
  components: { PersonSearch, FileView, ShowApproval },
  data() {
    return {
      ruleForm: {
        applicant: {},
        date: new Date(),
        applicant_dept: "",
        entry_time: "",
        formal_time: "",
        harvest: "",
      },
      rules: {
        applicant: [{ required: true, message: "请输入", trigger: "blur" }],
        date: [{ required: true, message: "请输入", trigger: "change" }],
        applicant_dept: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        entry_time: [{ required: true, message: "请输入", trigger: "change" }],
        formal_time: [{ required: true, message: "请输入", trigger: "change" }],
        culture: [{ required: true, message: "请输入", trigger: "blur" }],
        harvest: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      userInfo: {},
      showFileList: [],
      processId: "",
      fileList: [],
      ifDraft: false,
      mode: "",
      buttons: [],
      nodesInfo: {
        nodes: [],
        active: 0,
        reject: false,
        taskMode: [],
      },
    };
  },
  async mounted() {
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    let processId = this.$route.query.process_id;
    let operate_node = this.$route.query.operate_node;
    this.mode = this.$route.query.mode;
    this.ruleForm.applicant = this.userInfo;
    this.ruleForm.applicant_dept = this.userInfo.department_name;
    await tools.ifHasAuth(this, this.mode, processId, operate_node);
    this.ifDraft = this.mode === "submit" ? true : false;
    if (processId) {
      this.processId = processId;
      let res = await getFormData(processId);
      if (res.code === 20041) {
        this.ruleForm = res.data;
        if (res.data.report && res.data.report.length) {
          this.showFileList = res.data.report.split(",").map((item) => {
            return { name: item, url: `/local/uploadFiles/${item}` };
          });
          this.fileList = res.data.report.split(",").map((item) => {
            return { file_name: item, save_code: item };
          });
        }
      }
      res = await getSteps(processId);
      if (res.code === 20041) {
        this.nodesInfo = res.data;
      }
    }
    this.buttons = await tools.getNodeButtons(
      this,
      this.mode,
      processId,
      operate_node
    );
  },
  methods: {
    onRemove(file) {
      this.fileList = this.fileList.filter((item) => {
        return item.file_name !== file.name;
      });
    },
    onPreview(file) {
      if (file.url) {
        window.open(file.url, "_blank");
      } else {
        let fileName = this.fileList.filter(
          (item) => item.file_name === file.name
        )[0].save_code;
        window.open(`http://localhost/uploadFiles/${fileName}`, "_blank");
      }
    },
    onBeforeUpload(item) {
      if (
        item.type !== "application/vnd.ms-powerpoint" &&
        item.type !==
          "application/vnd.openxmlformats-officedocument.presentationml.presentation"
      ) {
        this.$message.error("上传格式错误");
        return false;
      }
    },
    async uploadFile(item) {
      let FormDatas = new FormData();
      FormDatas.append("file", item.file);
      let res = await uploadSomething(FormDatas);
      if (res.code === 20011) {
        this.fileList.push({
          file_name: item.file.name,
          save_code: res.data,
        });
      }
    },
    async operate(type) {
      if (this.mode === "submit") {
        if (type === "cancel") {
          tools.cancel(this);
        } else {
          this.$refs.ruleForm.validate(async (res) => {
            if (res) {
              let report = this.fileList
                .map((item) => {
                  return item.save_code;
                })
                .join(",");
              let res = await submitForm({
                app_id: "formal_apply",
                formData: {
                  ...this.ruleForm,
                  applicant_dept: this.userInfo.main_dept_id,
                  report: report,
                },
                mode: type === "submit" ? 1 : 0,
                process_id: this.processId ? this.processId : undefined,
              });
              if (res.code === 20011) {
                this.$message.success("提交成功");
                this.$router.back();
              } else {
                this.$message.error(res.msg);
              }
            }
          });
        }
      } else {
        let res = await setApprovalResult({
          process_id: this.processId,
          result: type,
        });
        if (res.code === 20031) {
          this.$router.back();
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
.new {
  width: 100%;
  .headerr {
    font-size: 14px;
    .shouye {
      color: rgba(0, 0, 0, 0.45);
      cursor: pointer;
      margin-right: 6px;
    }
  }
  .xuan {
    margin: 16px 0;
    padding: 24px;
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    .top {
      font-size: 18px;
      font-weight: 600;
      line-height: 25px;
    }
    .bottom {
      font-size: 14px;
      font-weight: 400;
      margin-top: 6px;
      line-height: 25px;
    }
  }
  .table {
    margin-top: 16px;
    padding: 24px 24px 14px;
    background-color: #fff;
    border-radius: 8px;
    :deep(.el-form) {
      display: flex;
      flex-wrap: wrap;
      .el-form-item {
        width: 33%;
        padding: 0 10px;
        .el-date-editor.el-input,
        .el-date-editor.el-input__inner {
          width: 100%;
        }
        .el-form-item__label {
          padding-bottom: 0;
          line-height: 24px;
        }
        .person-search {
          width: 100%;
        }
        .el-upload,
        .el-upload-dragger {
          width: 65%;
          &.el-upload {
            margin-top: 10px;
          }
        }
        .el-upload__tip {
          position: absolute;
          top: 140px;
          left: 40px;
          color: #999;
        }
      }
    }
  }
  .footer {
    margin: 25px 0;
    text-align: right;
  }
}
</style>
